<template>
  <view class="promoter-list" ref="container">
    <view class="header">
      <view class="promoterHeader bg-color-red">
        <view class="headerCon acea-row row-between-wrapper">
          <view>
            <view class="name">推广人数</view>
            <view>
              <text class="num">{{ first + second || '0' }}</text>
              <text>人</text>
            </view>
          </view>
        </view>
      </view>
      <view class="nav acea-row row-around">
        <view
          class="item"
          :class="screen.grade == 0 ? 'on' : ''"
          @click="checkGrade(0)"
          >一级({{ first || '0' }})</view
        >
        <view
          class="item"
          :class="screen.grade == 1 ? 'on' : ''"
          @click="checkGrade(1)"
          >二级({{ second || '0' }})</view
        >
      </view>
      <view class="search acea-row row-between-wrapper">
        <form @submit.prevent="submitForm">
          <view class="input">
            <input placeholder="点击搜索会员名称" v-model="screen.keyword" />
            <!-- <text class="iconfont icon-guanbi" @click="screen.keyword=''"></text> -->
          </view>
        </form>
        <view class="iconfont icon-sousuo2"></view>
      </view>
    </view>
    <view class="list">
      <view
        class="sortNav acea-row row-middle"
        :class="fixedState === true ? 'on' : ''"
      >
        <view class="sortItem" @click="sort('childCount')">
          团队排序
          <!-- <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort1.png`"
            v-if="childCount == 1"
          /> -->
          <!-- <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort2.png`"
            v-if="childCount == 2"
          /> -->
          <!-- <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort3.png`"
            v-if="childCount == 3"
          /> -->
        </view>
        <view class="sortItem" @click="sort('numberCount')">
          金额排序
          <!-- <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort1.png`"
            v-if="numberCount == 1"
          />
          <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort2.png`"
            v-if="numberCount == 2"
          />
          <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort3.png`"
            v-if="numberCount == 3"
          /> -->
        </view>
        <view class="sortItem" @click="sort('orderCount')">
          订单排序
          <!-- <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort1.png`"
            v-if="orderCount == 1"
          />
          <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort2.png`"
            v-if="orderCount == 2"
          />
          <image
            :src="`${$VUE_APP_RESOURCES_URL}/images/sort3.png`"
            v-if="orderCount == 3"
          /> -->
        </view>
      </view>
      <view :class="fixedState === true ? 'sortList' : ''">
        <view
          class="item acea-row row-between-wrapper"
          v-for="(val, spreadListIndex) in spreadList"
          :key="spreadListIndex"
        >
          <view class="picTxt acea-row row-between-wrapper">
            <view class="pictrue">
              <image :src="val.avatar" />
            </view>
            <view class="text">
              <view class="name line1">{{ val.nickname }}</view>
              <view>{{ val.time }}加入</view>
            </view>
          </view>
          <view class="right">
            <view>
              <text class="font-color-red">{{ val.childCount }}</text
              >人
            </view>
            <view>{{ val.orderCount }} 单</view>
            <view>{{ val.numberCount ? val.numberCount : 0 }} 元</view>
          </view>
        </view>
      </view>
    </view>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </view>
</template>
<script>
import { getSpreadUser } from '@/api/user'
import Loading from '@/components/Loading'
export default {
  name: 'PromoterList',
  components: {
    Loading,
  },
  props: {},
  data: function () {
    return {
      fixedState: false,
      screen: {
        page: 1,
        limit: 15,
        grade: 0,
        keyword: '',
        sort: '',
      },
      childCount: 2,
      numberCount: 2,
      orderCount: 2,
      loaded: false,
      loading: false,
      spreadList: [],
      loadTitle: '',
      first: '',
      second: '',
    }
  },
  mounted: function () {
    this.getSpreadUsers()
  },
  onReachBottom() {
    !this.loading && this.getSpreadUsers()
  },
  watch: {
    'screen.sort': function () {
      this.screen.page = 0
      this.loaded = false
      this.loading = false
      this.spreadList = []
      this.getSpreadUsers()
    },
  },
  methods: {
    handleScroll: function () {
      // var scrollTop =
      //   document.documentElement.scrollTop || document.body.scrollTop;
      // var offsetTop = document.querySelector(".header").clientHeight;
      // if (scrollTop >= offsetTop) {
      //   this.fixedState = true;
      // } else {
      //   this.fixedState = false;
      // }
    },
    submitForm: function () {
      this.screen.page = 0
      this.loaded = false
      this.loading = false
      this.spreadList = []
      this.getSpreadUsers()
    },
    getSpreadUsers: function () {
      let that = this,
        screen = that.screen
      if (that.loaded || that.loading) return
      that.loading = true
      getSpreadUser(screen).then(
        res => {
          that.loading = false
          that.spreadList.push.apply(that.spreadList, res.data.list)
          that.loaded = res.data.list.length < that.screen.limit //判断所有数据是否加载完成；
          that.loadTitle = that.loaded ? '人家是有底线的' : '上拉加载更多'
          that.screen.page = that.screen.page + 1
          that.first = res.data.total
          that.second = res.data.totalLevel
        },
        err => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        },
        300
      )
    },
    checkGrade: function (val) {
      if (val == this.screen.grade) return
      else {
        this.screen.page = 1
        this.screen.grade = val
        this.loading = false
        this.loaded = false
        this.spreadList = []
        this.getSpreadUsers()
      }
    },
    sort: function (types) {
      let that = this
      switch (types) {
        case 'childCount':
          if (that.childCount == 2) {
            that.childCount = 1
            that.orderCount = 2
            that.numberCount = 2
            that.screen.sort = 'childCount DESC'
          } else if (that.childCount == 1) {
            that.childCount = 3
            that.orderCount = 2
            that.numberCount = 2
            that.screen.sort = 'childCount ASC'
          } else if (that.childCount == 3) {
            that.childCount = 2
            that.orderCount = 2
            that.numberCount = 2
            that.screen.sort = ''
          }
          break
        case 'numberCount':
          if (that.numberCount == 2) {
            that.numberCount = 1
            that.orderCount = 2
            that.childCount = 2
            that.screen.sort = 'numberCount DESC'
          } else if (that.numberCount == 1) {
            that.numberCount = 3
            that.orderCount = 2
            that.childCount = 2
            that.screen.sort = 'numberCount ASC'
          } else if (that.numberCount == 3) {
            that.numberCount = 2
            that.orderCount = 2
            that.childCount = 2
            that.screen.sort = ''
          }
          break
        case 'orderCount':
          if (that.orderCount == 2) {
            that.orderCount = 1
            that.numberCount = 2
            that.childCount = 2
            that.screen.sort = 'orderCount DESC'
          } else if (that.orderCount == 1) {
            that.orderCount = 3
            that.numberCount = 2
            that.childCount = 2
            that.screen.sort = 'orderCount ASC'
          } else if (that.orderCount == 3) {
            that.orderCount = 2
            that.numberCount = 2
            that.childCount = 2
            that.screen.sort = ''
          }
          break
        default:
          that.screen.sort = ''
      }
    },
  },
}
</script>
